<template>
  <div id="client">
    <p style="margin-left: 20px">
      <span class="demonstration" style="margin-left: 20px">开票日期：</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      &nbsp;&nbsp;&nbsp;
      <span class="demonstration" style="margin-left: 20px">单据日期：</span>
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
    </p>

    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 单据编号：<el-input
        style="width: 180px; margin-left: 10px; margin-right: 20px"
        placeholder="单据编号"
        v-model="input"
        clearable
      >
      </el-input>
      &nbsp;&nbsp;&nbsp;
      <span
        style="
          display: inline-block;
          float: right;
          margin-right: 78px;
          margin-top: 20px;
          margin-bottom: 20px;
        "
      >
        <el-button type="primary">查询</el-button>
        <el-button type="primary" @click="goto('Invoicing')">开票</el-button>
      </span>
    </p>
    <el-table
      height="400px"
      :data="invoices"
      border
      style="width: 100%; font-size: 13px"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="createTime" label="开票日期" width="120">
      </el-table-column>
      <el-table-column prop="piaomoney" label="开票金额" width="120">
      </el-table-column>
      <el-table-column prop="inum" label="发票号" width="120">
      </el-table-column>
      <el-table-column prop="title" label="发票抬头" width="120">
      </el-table-column>
      <el-table-column prop="initTime" label="单据日期" width="150">
      </el-table-column>
      <el-table-column prop="initnum" label="单据编号" width="120">
      </el-table-column>
      <el-table-column prop="orderId" label="源销货订单号" width="120">
      </el-table-column>
      <el-table-column prop="customernum" label="客户编号" width="120">
      </el-table-column>
      <!-- <el-table-column prop="doman" label="制单人" width="120">
      </el-table-column> -->
      <el-table-column prop="doTime" label="制单日期" width="120">
      </el-table-column>
      <el-table-column prop="totalprice" label="金额" width="120">
      </el-table-column>
      <!-- <el-table-column prop="tax" label="税率" width="120"> </el-table-column> -->
      <!-- <el-table-column prop="taxmoney" label="价税合计" width="120">
      </el-table-column> -->
      <el-table-column prop="saler" label="销售人员编号" width="120">
      </el-table-column>
      <el-table-column prop="collectionmoney" label="已收款" width="120">
      </el-table-column>
      <el-table-column prop="collectiontype" label="收款状态" width="120">
      </el-table-column>
      <el-table-column prop="piaoMoney" label="开票金额" width="120">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <div style="float: right; position: relative; right: 100px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-size="pageInfo.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </div>
    <div style="height: 20px; clear: both"></div>
  </div>
</template>

<script>
export default {
  name: "InvoicingList",
  data() {
    return {
      pageInfo: "",
      currentPage4: 1,
      invoices: [],
    };
  },
  created() {
    this.getInvoices(1);
  },
  methods: {
    handleClick(row) {
      console.log(row);
      this.axios({
        url: "/erp/sale/invoice/del",
        params: {
          id: row.id,
        },
      }).then((rs) => {
        alert(rs.data.del);
      });
    },
    handleCurrentChange(val) {
      this.getInvoices(val);
    },
    getInvoices(pageNum) {
      this.axios({
        url: "/erp/sale/invoice/page",
        params: {
          pageNum,
          pageSize: 5,
        },
      })
        .then((rs) => {
          console.log("pageInfo", rs.data.pageInfo);
          this.invoices = rs.data.pageInfo.list;
          this.pageInfo = rs.data.pageInfo;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goto(to) {
      if (this.$route.path !== "/" + to) {
        this.$router.push(to);
      }
    },
  },
};
</script>

<style scoped>
.el-button el-button--default el-popover__reference {
  margin-right: 20px;
}

tr {
  border: 1px solid black;
}
</style>